<template>
  <div
    class="widgets"
    :style="{
      left: val.left + 'px',
      top: val.top + 'px',
      width: val.width + 'px',
      height: val.height + 'px',
      textAlign: val.style.Alignment,
      fontSize: val.style.FontSize + 'pt',
      color: val.style.FontColor,
    }"
    style="position: absolute; overflow: hidden"
  >
    <table
      border="1"
      width="100%"
      cellspacing="0"
      cellpadding="2"
      style="border-collapse: collapse; font-size: 12px; table-layout: fixed"
      bordercolor="#000000"
    >
      <tr>
        <th
          v-for="item in columns"
          :key="item.name"
          :width="item.width ? item.width + 'px' : ''"
        >
          {{ item.title }}
        </th>
      </tr>
      <tr>
        <td
          v-for="item in columns"
          :key="item.name"
          :width="item.width ? item.width + 'px' : ''"
        >
          {{ item.value }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup name="braid-table">
const WIDGET_NAME = ref('braid-table')
const props = defineProps([
  'val', // 文本对象
])
const setting = ref({
  type: WIDGET_NAME.value,
  isEdit: false, // 是否可编辑
  dragable: true, // 是否可拖拽
  resizable: true, // 尺寸是否可变
  width: 240,
  height: 60,
  left: 50,
  top: 10,
  title: '表格',
  value: [],
  defaultValue: [],
  tabelHtml: '',
  columnsAttr: [], // 表格列选项
  columns: [], // 已选表格列表
  selectCol: [], // 已选表格列name数组（用于多选框双向绑定）
  name: '',
  style: {
    zIndex: 0,
    Alignment: 'left', // 对齐方式 1--左靠齐 2--居中 3--右靠齐
    FontSize: 9,
    FontColor: '#000000',
    BorderColor: '#000000',
    AutoHeight: false, // 高度自动（模板在该元素位置以下的元素都关联打印）
    BottomMargin: 0, // 距离下边距
  },
})
// 去掉type='row'的数据
const columns = computed(() => {
  let col = props.val.columns || []
  return col
})
</script>
